/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  AlertIOS,
} from 'react-native';

var  TouchableDemo = React.createClass({
    getDefaultProps(){
      return{
        age:18,
      }
    },
    getInitialState(){
      return{
        name:'不透明触摸',
        preson:'张三',
      }
    },
    render() {
        return (
            <View ref="topView" style={styles.container}>
              <TouchableOpacity
                  activeOpacity={0.5}
                  onPress={() => this.activeEvent('点击')}
                  onPressIn={() => this.activeEvent('按下')}
                  onPressOut={() => this.activeEvent('抬起')}
                  onLongPress={() => this.activeEvent('长按')}>
                <View style={styles.innerViewStyle}>
                  <Text>改变事件</Text>
                </View>
              </TouchableOpacity>
              <View>
                <Text ref="event">{this.state.name}</Text>
                <Text>{this.state.preson}</Text>
                <Text>{this.props.age}</Text>
              </View>
            </View>
        );
    },
    //当按下鼠标
    activeEvent(event){
      this.setState({
          name:event,
          preson:'李四'
      })
        this.refs.topView;
      this.refs.event
    }
})
// export default class TouchableDemo extends Component {
//
// }

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
    innerViewStyle:{
    backgroundColor:'red',
    },
});

AppRegistry.registerComponent('TouchableDemo', () => TouchableDemo);
